<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ '编辑笔记' if is_edit else '新建笔记' }} - NoteX</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }

        .toast {
            background-color: #4CAF50;
            color: white;
            padding: 16px 24px;
            border-radius: 8px;
            margin-bottom: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            animation: slideIn 0.3s ease-out;
        }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="max-w-4xl mx-auto p-6">
        <div class="bg-white rounded-lg shadow-lg p-6">
            <div class="flex items-center justify-between mb-6">
                <h1 class="text-2xl font-bold">{{ '编辑笔记' if is_edit else '新建笔记' }}</h1>
                <button onclick="window.location.href='/'" class="text-gray-600 hover:text-gray-800">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="noteForm" class="space-y-6" action="{{ url_for('edit_note', note_id=note.id) if is_edit else url_for('new_note') }}" method="POST">
                <div>
                    <input type="text" id="title" name="title" placeholder="笔记标题" 
                        value="{{ note.title if note else '' }}"
                        class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <textarea id="content" name="content" rows="12" placeholder="开始写作..." 
                        class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">{{ note.content if note else '' }}</textarea>
                </div>
                <div>
                    <input type="text" id="tags" name="tags" placeholder="添加标签（用逗号分隔）" 
                        value="{{ ','.join(note.tags) if note and note.tags else '' }}"
                        class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex justify-end space-x-4">
                    <button type="button" onclick="window.location.href='/'" 
                        class="px-6 py-2 border rounded-lg hover:bg-gray-100">取消</button>
                    <button type="submit" 
                        class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 提示消息容器 -->
    <div class="toast-container" id="toastContainer"></div>

    <script>
        // 显示提示消息的函数
        function showToast(message) {
            const container = document.getElementById('toastContainer');
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.innerHTML = `
                <i class="fas fa-check-circle mr-2"></i>
                ${message}
            `;
            container.appendChild(toast);

            // 2秒后自动消失并跳转
            setTimeout(() => {
                toast.style.animation = 'slideOut 0.3s ease-out forwards';
                toast.addEventListener('animationend', () => {
                    container.removeChild(toast);
                    window.location.href = '/';
                });
            }, 2000);
        }

        document.getElementById('noteForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            try {
                const response = await fetch(this.action, {
                    method: 'POST',
                    body: formData
                });
                const data = await response.json();
                if (data.success) {
                    showToast('笔记保存成功');
                } else {
                    showToast('保存失败，请重试');
                }
            } catch (error) {
                console.error('Error:', error);
                showToast('保存失败，请重试');
            }
        });
    </script>
</body>
</html> 